<template>
	<div ref="chartTow" style="width: 100%; height: 100%"></div>
</template>

<script>
export default {
	name: 'lineTow',
	props: {
		eventModuleStats: {
			type: Object,
		},
	},
	watch: {
		eventModuleStats: {
			handler(newVal, oldVal) {
				this.updateChart();
			},
			deep: true, // 开启深度监听
		},
	},
	created() {},
	mounted() {
		this.initChartTow();
	},
	data() {
		return {
			salvProNameList: [
				{
					module: 1,
					name: '首页',
					durationRatio: '0',
					countRatio: '0',
				},
				{
					module: 2,
					name: '短剧',
					durationRatio: '0',
					countRatio: '0',
				},
				{
					module: 3,
					name: '小说',
					durationRatio: '0',
					countRatio: '0',
				},
				{
					module: 4,
					name: '个人中心',
					durationRatio: '0',
					countRatio: '0',
				},
				{
					module: 5,
					name: '文章',
					durationRatio: '0',
					countRatio: '0',
				},
				{
					module: 6,
					name: '短视频',
					durationRatio: '0',
					countRatio: '0',
				},
				{
					module: 7,
					name: '直播',
					durationRatio: '0',
					countRatio: '0',
				},
				{
					module: 8,
					name: 'AI',
					durationRatio: '0',
					countRatio: '0',
				},
			],
		};
	},
	methods: {
		initChartTow() {
			this.chartDom = this.$refs.chartTow;
			this.myChart = this.$echarts.init(this.chartDom);
			let newFontSize = (window.innerWidth * 0.04) / 6;
			let fontColor = '#5072a4';
			this.dateList = [];
			this.avgVisitsPerUdId = []; //平均时长
			this.maxVisitsSingleUdId = []; //最大时长
			this.clickCount = [];
			for (let salvProItem of this.salvProNameList) {
				for (let item of this.eventModuleStats) {
					if (salvProItem.module == item.module) {
						salvProItem.durationRatio = item.durationRatio;
						salvProItem.countRatio = item.countRatio;
					}
				}
			}
			this.salvProNameList.sort((a, b) => a.durationRatio - b.durationRatio);
			for (let salvProItem of this.salvProNameList) {
				this.avgVisitsPerUdId.push(salvProItem.durationRatio);
				this.maxVisitsSingleUdId.push(salvProItem.countRatio);
				this.clickCount.push(salvProItem.clickCount);
				this.dateList.push(salvProItem.name);
			}
			this.option = {
				// backgroundColor: '#11183c',
				textStyle: {
					fontSize: newFontSize, // 全局字体大小调整
				},
				grid: {
					left: '4%',
					right: '6%',
					top: '25%',
					bottom: '5%',
					containLabel: true,
				},
				tooltip: {
					trigger: 'axis',
					backgroundColor: '#fff',
					extraCssText: 'background: linear-gradient(to right, #286CE9, #01D1FF);',
					textStyle: {
						color: '#FFF',
						fontSize: newFontSize, // 全局字体大小调整
					},
				formatter: function (params) {
						let DIV = '';
						for (let item of params) {
						DIV =
							`<div> ${item.seriesName} : ${item.value}%</div>`;
						}
						return DIV;
					},
					axisPointer: {
						type: 'line',
						label: {
							show: true,
							backgroundColor: '#7B7DDC',
							color: '#fff',
						},
					},
				},
				legend: {
					show: true,
					top: '5%',
					right: '2%',
					orient: 'vertucal',
					// icon: 'stack',
					itemGap: 4,
					itemWidth: newFontSize,
					itemHeight: newFontSize * 0.2,
					textStyle: {
						color: 'inherit',
						// fontSize: newFontSize,
					},
					data: ['时长占比'],
				},
				xAxis: [
					{
						type: 'value',
						// boundaryGap: true,
						axisLabel: {
							color: fontColor,
							fontSize: newFontSize,
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#5072a4',
							},
						},
						axisTick: {
							show: true,
							lineStyle: {
								color: '#6EA8C2', // 红色刻度线
								width: 2,
								// 刻度线宽度为2px
							},
							alignWithLabel: true,
							show: true,
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: '#195384',
							},
						},
						// data: dateList,
						// data: ['首页', '2.短剧', '3.小说', '个人中心', '文章', '短视频', '直播', 'AI'],
					},
				],
				yAxis: {
					type: 'category',
					data: this.dateList,
					// data: ['首页', '短剧', '小说', '个人中心', '文章', '短视频', '直播', 'AI'],
					name: '',
					show: true,
					axisLabel: {
						formatter: '{value}',
						fontSize: newFontSize,
						textStyle: {
							color: '#5072a4',
						},
					},
					axisLine: {
						lineStyle: {
							color: '#5072a4',
						},
					},
					axisTick: {
						lineStyle: {
							color: '#6EA8C2', // 红色刻度线
							width: 2,
							// 刻度线宽度为2px
						},
						alignWithLabel: true,
						show: true,
					},
					splitLine: {
						show: false,
						lineStyle: {
							color: '#11366e',
						},
					},
				},
				series: [
					// {
					// 	name: '数量占比',
					// 	type: 'bar',
					// 	stack: '数量占比',
					// 	symbol: 'circle',
					// 	symbolSize: 5,
					// 	barWidth: newFontSize / 2,
					// 	itemStyle: {
					// 		normal: {
					// 			color: '#2B80FF',
					// 			lineStyle: {
					// 				color: '#2B80FF',
					// 				width: 1,
					// 			},
					// 			areaStyle: {
					// 				//color: '#94C9EC'
					// 				color: new this.$echarts.graphic.LinearGradient(2, 0, 0, 1, [
					// 					{
					// 						offset: 1,
					// 						color: 'rgba(7,44,90,0)',
					// 					},
					// 					{
					// 						offset: 0,
					// 						color: 'rgba(114,144,89,1)',
					// 					},
					// 				]),
					// 			},
					// 		},
					// 	},
					// 	data: this.maxVisitsSingleUdId,
					// 	// data: [12, 23, 35, 100, 45, 12, 23, 35, 100],
					// },
					{
						name: '时长占比',
						type: 'bar',
						stack: '时长占比',
						symbol: 'circle',
						symbolSize: 5,
						barWidth: newFontSize / 2,
						itemStyle: {
							normal: {
								color: '#05cbf1',
								lineStyle: {
									color: '#05cbf1',
									width: 1,
								},
								areaStyle: {
									//color: '#94C9EC'
									color: new this.$echarts.graphic.LinearGradient(2, 0, 0, 1, [
										{
											offset: 1,
											color: 'rgba(7,44,90,0)',
										},
										{
											offset: 0,
											color: 'rgba(114,144,89,1)',
										},
									]),
								},
							},
						},
						data: this.avgVisitsPerUdId,
						// data: [12, 23, 35, 100, 45, 12, 23, 35, 100],
					},
					// {
					// 	name: '点击次数',
					// 	type: 'bar',
					// 	stack: '点击次数',
					// 	symbol: 'circle',
					// 	symbolSize: 5,
					// 	itemStyle: {
					// 		normal: {
					// 			color: '#4E2BFF',
					// 			lineStyle: {
					// 				color: '#4E2BFF',
					// 				width: 1,
					// 			},
					// 			areaStyle: {
					// 				//color: '#94C9EC'
					// 				color: new echarts.graphic.LinearGradient(2, 0, 0, 1, [
					// 					{
					// 						offset: 1,
					// 						color: 'rgba(7,44,90,0)',
					// 					},
					// 					{
					// 						offset: 0,
					// 						color: 'rgba(114,144,89,1)',
					// 					},
					// 				]),
					// 			},
					// 		},
					// 	},
					// 	data: clickCount,
					// 	// data: [12, 23, 35, 100, 45],
					// },
				],
			};
			this.myChart.setOption(this.option);

			this.$nextTick(() => {
				this.resize(this.myChart, this.option);
			});
		},
		resize(myChart) {
			window.addEventListener('resize', () => {
				let FontSize = (window.innerWidth * 0.04) / 6;
				let newOption = {
					textStyle: {
						fontSize: FontSize, // 应用新的字体大小
					},
					tooltip: {
						textStyle: {
							fontSize: FontSize, // 全局字体大小调整
						},
					},
					legend: {
						itemWidth: FontSize,
						itemHeight: FontSize * 0.2,
					},
					xAxis: [
						{
							axisLabel: {
								fontSize: FontSize,
							},
						},
					],
					yAxis: [
						{
							axisLabel: {
								fontSize: FontSize,
							},
						},
					],
					series: [
						{
							barWidth: FontSize / 2,
						},
						{
							barWidth: FontSize / 2,
						},
					],
				};
				this.option = { ...this.option, ...newOption };
				myChart.setOption(this.option);
				myChart.resize();
			});
		},
		updateChart() {
			this.avgVisitsPerUdId = [];
			for (let salvProItem of this.salvProNameList) {
				for (let item of this.eventModuleStats) {
					if (salvProItem.module == item.module) {
						salvProItem.durationRatio = item.durationRatio;
						salvProItem.countRatio = item.countRatio;
					}
				}
				this.avgVisitsPerUdId.push(salvProItem.durationRatio);
				this.maxVisitsSingleUdId.push(salvProItem.countRatio);
			}
			this.option.series[1].data = [...this.avgVisitsPerUdId];
			this.option.series[0].data = [...this.maxVisitsSingleUdId];
			this.option.animation = false;
			this.myChart.setOption(this.option);
		},
	},
};
</script>
<style scoped lang="scss">
.mapDom {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.echarts {
	display: flex;
	align-items: center;

	.echartsLeft {
		width: auto;
		background-image: linear-gradient((#063053, 0.3), (#395873, 0.3), (#5c7c99.3));
	}

	.echartsRight {
		width: auto;
		background-color: #000;
	}

	.echartsCenter {
		flex: 1;
		background-color: #000;
	}
}
</style>
